{% extends 'myhome/index.html' %}

{% block title %}
<title>个人中心</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/addstyle.css" rel="stylesheet" type="text/css">
{% endblock %}
{% block js %}
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
{% endblock %}

{% block con %}
<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="{% url 'myhome_index' %}">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">
            <div class="user-address">
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">编辑地址</a>
                <!--添加新地址-->
                <div class="" id="doc-modal-1">
                    <div class="add-dress">
                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf">
                                <strong class="am-text-danger am-text-lg">
                                    <a href="javascript:void(0)" style="font-size: 20px;" id="showaddress">编辑地址</a>
                                </strong>
                            </div>
                        </div>
                        <hr>
                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form action="{% url 'myhome_editaddress' %}" method="POST" class="am-form am-form-horizontal">                                
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label receiveperson">收货人</label>
                                    <div class="am-form-content">
                                        <input name="id" type="hidden" id="user-name" placeholder="收货人" value="{{ data.id }}">
                                        <input name="receiver" type="text" id="user-name" placeholder="收货人" value="{{ data.receiver }}">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input name="receivephone" id="user-phone" placeholder="手机号必填" type="tel"  value="{{ data.receivephone }}">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                <label for="user-phone" class="am-form-label">
                                    所在地
                                </label>
                                <div class="am-form-content address">
                                    <select name="province">
                                        {% for v in province %}
                                            {% if v.id == pid %}
                                                <option selected value="{{ v.id }}">
                                                    {{ v.name }}
                                                </option>
                                            {% else %}
                                                <option value="{{ v.id }}">
                                                    {{ v.name }}
                                                </option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                    <select name="city">
                                        {% for c in city %}
                                            {% if c.id == cid %}
                                                <option selected value="{{ c.id }}">
                                                    {{ c.name }}
                                                </option>
                                            {% else %}
                                                <option value="{{ c.id }}">
                                                    {{ c.name }}
                                                </option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                    <select name="county">
                                        {% for i in county %}
                                            {% if i.id == cid %}
                                                <option selected value="{{ i.id }}">
                                                    {{ i.name }}
                                                </option>
                                            {% else %}
                                                <option value="{{ i.id }}">
                                                    {{ i.name }}
                                                </option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>                        
                                </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea  name="info" class="" rows="3" id="user-intro" placeholder="输入详细地址">{{ data.info }}</textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <button class="am-btn am-btn-danger" id="addressadd">保存</button>
                                        <a href="{% url 'myhome_personaddress' %}" class="am-close am-btn am-btn-danger" data-am-modal-close id="addressclose">取消</a>
                                    </div>
                                </div>
                                {% csrf_token %}
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {                          
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });
                    
                    var $ww = $(window).width();
                    if($ww>640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }
                    
                })
            </script>
            <div class="clear"></div>
        </div>
        <!--底部-->
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="#">恒望科技</a>
                    <b>|</b>
                    <a href="#">商城首页</a>
                    <b>|</b>
                    <a href="#">支付宝</a>
                    <b>|</b>
                    <a href="#">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="#">关于恒望</a>
                    <a href="#">合作伙伴</a>
                    <a href="#">联系我们</a>
                    <a href="#">网站地图</a>
                    <em>© 2015-2025 Hengwang.com 版权所有</em>
                </p>
            </div>
        </div>
    </div>
    <aside class="menu">
        <ul>
            <li class="person active">
                <a href="index.html">个人中心</a>
            </li>
            <li class="person">
                <a href="#">个人资料</a>
                <ul>
                    <li> <a href="{% url 'myhome_personinfo' %}">个人信息</a></li>
                    <li> <a href="safety.html">安全设置</a></li>
                    <li> <a href="{% url 'myhome_personaddress' %}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li><a href="{% url 'myhome_personorder' %}">订单管理</a></li>
                    <li> <a href="change.html">退款售后</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的资产</a>
                <ul>
                    <li> <a href="bill.html">账单明细</a></li>
                </ul>
            </li>
        </ul>
    </aside>
</div>

<script type="text/javascript">
    // 获取页面中的下拉选框 绑定事件
    $('.address select').click(function(){
        // 获取当前选中的元素
        var id = $(this).val()
        // 发送ajax请求，获取下一级的数据
        $.get('{% url 'myhome_getcitys' %}',{'id':id},function(data){
            // 判断返回的数据
            if(data.length==0){
                return
            }
            // 判断城市等级
            if(data[0].level==2){
                var res = $('.address select[name=city]')
            }else if(data[0].level==3){
                var res = $('.address select[name=county]')
            }else{
                return;
            }
            var ops = ''
            // 遍历获取的结果,拼接成option选项
            for(var i=0;i<data.length;i++){
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 把拼接好的选项加入到下拉框中
            res.html(ops)
        },'json')
    })
</script>
{% endblock %}